<template>
  <div>
    <el-button type="primary" @click="visible = true">添加用户</el-button>

    <el-table :data="userList" border>
      <el-table-column type="index" align="center" width="50" label="序号" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="roleName" label="角色权限列表" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="showAssignRole(row)">
            分配角色权限
          </el-button>
          <el-button type="danger" @click="removeUser(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog title="添加用户" :visible.sync="visible">
      <el-form label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" />
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="userForm.nickName" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="分配角色权限" :visible.sync="assignRoleVisible">
      <el-form label-width="100px">
        <el-form-item label="用户名"> xxx </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox-group v-model="assignRoleForm.assignRoles">
            <!-- label代表选中的值 -->
            <el-checkbox
              v-for="role in assignRoleForm.allRolesList"
              :key="role.id"
              :label="role.id"
            >
              {{ role.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="assignRole">确 定</el-button>
          <el-button @click="assignRoleVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      userList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      visible: false,
      assignRoleVisible: false,
      userForm: {
        username: '',
        nickName: '',
        password: ''
      },
      assignRoleForm: {
        id: '',
        username: '',
        assignRoles: [],
        allRolesList: []
      }
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    // 删除用户
    async removeUser(id) {
      await this.$API.acl.user.removeUser(id)
      this.$message.success('删除用户成功')
      this.getUserList()
    },
    // 分配角色
    async assignRole() {
      const { id, assignRoles } = this.assignRoleForm
      const roleId = assignRoles.join(',') // 1111,2222,3333
      await this.$API.acl.user.assignUserRole(id, roleId)
      this.assignRoleVisible = false
      this.$message.success('分配用户角色成功')
      this.getUserList()
    },
    async showAssignRole(row) {
      this.assignRoleForm.id = row.id
      this.assignRoleForm.username = row.username
      this.assignRoleVisible = true
      // 发送请求，获取角色列表
      const result = await this.$API.acl.user.getUserRoleList(row.id)
      this.assignRoleForm.allRolesList = result.data.allRolesList
      this.assignRoleForm.assignRoles = result.data.assignRoles.map(
        (item) => item.id
      )
    },
    // 取消
    cancel() {
      this.visible = false
      this.userForm = {
        username: '',
        nickName: '',
        password: ''
      }
    },
    // 添加用户
    async addUser() {
      await this.$API.acl.user.saveUser(this.userForm)
      this.$message.success('添加用户成功')
      this.getUserList()
      this.cancel()
    },
    // 获取用户列表
    async getUserList() {
      const { currentPage, pageSize } = this
      const result = await this.$API.acl.user.getUserList(currentPage, pageSize)
      this.userList = result.data.items
      this.total = result.data.total
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getUserList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getUserList()
    }
  }
}
</script>

<style>
</style>
